<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">

    function UserGreeting(props){
        return <h1>Welcome back!</h1>;
    }

    function GuestGreeting(props){
        return <h1>Please sign up.</h1>;
    }

    function Greeting(props){
        const isLoggedIn = props.isLoggedIn;
        if(isLoggedIn){
            return <UserGreeting/>;
        }else{
            return <GuestGreeting/>;
        }
    }

    function LoginButton(props){
        return (
            <button onClick={props.onClick}>Login</button>
        );
    }

    function LogoutButton(props){
        return (
            <button onClick={props.onClick}>Logout</button>
        );
    }

    class LoginControl extends React.Component{
        constructor(props){
            super(props);
            this.handleLoginClick = this.handleLoginClick.bind(this);
            this.handleLogoutClick = this.handleLogoutClick.bind(this);
            this.state = {isLoggedIn : false};
        }

        handleLoginClick(){
            this.setState({isLoggedIn:true});
        }

        handleLogoutClick(){
            this.setState({isLoggedIn:false});
        }

        render(){
            const isLoggedIn = this.state.isLoggedIn;
            const button = isLoggedIn ? (
                <LogoutButton onClick = {this.handleLogoutClick}/>
            ) : (
                <LoginButton onClick = {this.handleLoginClick}/>
            );

            return (
                <div>
                    <Greeting isLoggedIn={isLoggedIn}/>
                    {button}
                </div>
            );
        }
    }

    ReactDOM.render(<LoginControl />, document.getElementById('root'));
  </script>
  <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
</body>

</html>